<template>
  <div id="app">
    <!-- 利用父传子触发重载组件 -->
    <Topbar :key="topBarKeyValue"></Topbar>
    <!-- <button @click="btnConfirm">触发弹框</button> -->
    <Header></Header>
    <router-view @undatekey="undateKeyFn" />
    <Footer></Footer>
    <Login v-show="isShowLoginModel"></Login>
    <!-- <i class="iconfont icon-yduifuxuankuangxuanzhong"></i> -->
    <transition name="myShow">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>
<script>
import Topbar from "@/components/Topbar.vue";
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast.vue";
// import instance from '@/request/request'
// import { JingPinApi } from "@/request/Api";
import { mapState } from "vuex";
export default {
  data() {
    return { topBarKeyValue: 1 };
  },
  computed: {
    ...mapState({
      isShowLoginModel: (state) => state.showLoginModel.isShowLoginModel,
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  async created() {
    // 犯了个错误，引入的是 instance，里面封装了 axios，但直接写 axios 获取不到，还是抄着官网写了，没有灵活转换过来
    /* instance.get('/products/recommend', {
      params: {
        ID: 12345
      }
    })
    .then(function (response) {
      console.log({response});
    })
    .catch(function (error) {
      console.log({error});
    }); */
    /* JingPinApi().then( (res)=> {
      console.log({res});
    })
    .catch( (err)=> {
      console.log({err});
    }); */
    /* let res = await JingPinApi();
    console.log({ res }); */
    /* localStorage.setItem(
      "x-auth-token",
      "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NjYyNTU3MDcsImlhdCI6MTY2NTY1MDkwNywidXNlcm5hbWUiOiJhMjhhMzdiNC0yZWZlLTQxODMifQ.Igzyc1I_OMS3gGLWOHKVc7CvoRCv0gp3fVxh9wRVVzM"
    ); */
    /* console.log(
      "dev开发环境的:",
      process.env.VUE_APP_BASE_URL,
      process.env.VUE_APP_MYNAME
    );
    console.log(
      "prod生产环境的:",
      process.env.VUE_APP_BASE_URL,
      process.env.VUE_APP_MYNAME
    ); */
  },
  // 判断登录状态法二：
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal);
        if (newVal == oldVal) return;
        if (oldVal == "/") return;
        this.topBarKeyValue++;
      },
    },
  },
  methods: {
    undateKeyFn() {
      console.log("触发了父组件app的方法");
      this.topBarKeyValue++;
    },
    btnConfirm() {
      this.$Confirm({
        title: "vue道筑基",
      })
        .then((confirm) => {
          console.log(confirm);
        })
        .catch((cancel) => {
          console.log(cancel);
        });
    },
  },
  components: {
    Footer,
    Topbar,
    Header,
    Login,
    Toast,
  },
};
</script>
<style lang="less" >
.myShow-enter,
.myShow-leave-to {
  opacity: 0;
}
.myShow-enter-active,
.myShow-leave-active {
  transition: opacity 0.5s linear; // 让 opacity 属性有 0.5s 的动画过渡时长效果, linear 匀速
}

.myShow-enter-to,
.myShow-leave {
  opacity: 1;
}
</style>
